<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工管理</title>

    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css" type="text/css" />
    <link rel="stylesheet" href="/css/core.css" type="text/css" />
    <script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery-form/jquery.form.js"></script>
    <script type="text/javascript" src="/js/plugins/messager/jquery.bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/plugins/twbsPagination/jquery.twbsPagination.min.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery-validation/jquery.validate.min.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery-validation/message/messages_ja.js"></script>
    <script type="text/javascript" src="/js/plugins/jsrender/jsrender.min.js"></script>
    <script type="text/javascript" src="/js/My97DatePicker/WdatePicker.js"></script>
    <!--最后引入-->
    <script type="text/javascript" src="/js/system/commonAll.js"></script>

    <script>
        $(function () {

            var keyword = '';

            listInfo();

            $('.searchBtn').click(function () {
                keyword = $('#keyword').val();
                console.log(keyword);
                listInfo();
            })





            function listInfo() {
                var currentPage = $('#currentPage').val();
                // 发送ajax请求获取所有员工数据
                $.get('/employees/list', {pageSize:5, keyword:keyword, currentPage:currentPage}, function (data) {
                    console.log(data);
                    sessionStorage.setItem('nowPage', currentPage);
                    var html = $('#allInfo').render(data);
                    $('#tbody').html(html);


                    $('.inputBtn').click(function () {

                        $('#editForm')[0].reset();

                        var json = $(this).data('json');
                        if(json){
                            $('#editForm input[name="id"]').val(json.id);
                            $('#editForm input[name="username"]').val(json.username);
                            $('#editForm input[name="nickname"]').val(json.nickname);
                            $('#editForm input[name="salary"]').val(json.salary);
                        }

                        $('#editModal').modal("show");
                    })

                    // 新增编辑
                    $('#saveBtn').click(function () {
                        var id = $('#editForm input[name="id"]').val();
                        if(id){
                            // 有值就是编译
                            $('#editForm').append('<input type="hidden" name="_method" value="PUT">');
                            $('#editForm').ajaxSubmit(function (data) {
                                if(data.success){
                                    // 编辑也是同删除一样
                                    location.reload();
                                    // currentPage = sessionStorage.getItem('nowPage');
                                    /*$('#currentPage').val(currentPage);
                                    listInfo();
                                    $('#closeBtn').click();*/
                                }else{
                                    alert(data.msg);
                                }
                            })
                        }else{
                            // 新增
                            $('#editForm').ajaxSubmit(function (data) {
                                if(data.success){
                                    location.reload();
                                }else{
                                    alert(data.msg);
                                }
                            })
                        }
                    })


                    // 删除
                    $('.deleteBtn').click(function () {
                        var url = $(this).data('url');
                        console.log(url);
                        $.messager.confirm("温馨提示", "您真的确定要删除吗?", function () {
                            $.ajax({
                                type: "DELETE",
                                url: "/employees/delete",
                                data: "empId=" + url,
                                success: function(data){
                                    if(data.success){
                                        // 因为删除的时候没有清空查询数据, 导致多次新增事件

                                        // 本来想删除之后回显页数的, 但是回显之后新增出bug了,
                                        location.reload();
                                        // $('#currentPage').val(sessionStorage.getItem('nowPage'))
                                        /*$('#currentPage').val(currentPage);
                                        listInfo();*/
                                    }else{
                                        alert(data.msg);
                                    }
                                }

                            })
                        })
                    })


                    // 分页
                    $("#pagination").twbsPagination({
                        totalPages: data.pages,
                        startPage: data.pageNum,
                        visiblePages:3,
                        first:"首页",
                        prev:"上一页",
                        next:"下一页",
                        last:"尾页",
                        onPageClick:function(event,page){
                            $("#currentPage").val(page);
                            listInfo();
                        }
                    });

                })
            }







        })


    </script>

    <script type="text/x-jsrender" id="allInfo">
        {{for list}}
            <tr>
               <td>{{:id}}</td>
               <td>{{:username}}</td>
               <td>{{:nickname}}</td>
               <td>{{:salary}}</td>
               <td>
                   <a class="btn btn-info btn-xs inputBtn" data-json='{{:json}}'>
                       <span class="glyphicon glyphicon-pencil"></span> 编辑
                   </a>
                   <a role="button" data-url="{{:id}}"
                      class="btn btn-danger btn-xs deleteBtn">
                       <span class="glyphicon glyphicon-trash"></span> 删除
                   </a>
               </td>
           </tr>
        {{/for}}
    </script>
</head>
<body>
<!--左侧菜单回显变量设置-->
<div class="container " style="margin-top: 20px">
    <div class="row">
        <div class="col-sm-10">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class="page-head-line">员工管理</h1>
                </div>
            </div>

            <!--高级查询--->
            <form class="form-inline" id="searchForm" disabled="disable">
                <input type="hidden" name="currentPage" id="currentPage" value="1">
                <input style="display:none;">
                <div class="form-group">
                    <label>关键字:</label>
                    <input type="text" class="form-control" id="keyword" name="keyword"
                           placeholder="请输入姓名/邮箱">
                </div>
                <button type="button" id="btn_query" class="btn btn-info searchBtn"><span class="glyphicon glyphicon-search"></span> 查询</button>
                <button type="button" class="btn btn-primary inputBtn"><span class="glyphicon glyphicon-plus"></span> 新增</button>
            </form>
            <script>

            </script>


            <table class="table table-striped table-hover">
                <thead>
                <tr>
                    <th>编号</th>

                    <th>用户名</th>
                    <th>昵称</th>
                    <th>工资</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="tbody">

                </tbody>
                <!--<#list result.list as entity>
                   <tr>
                       <td>${entity_index + 1}</td>
                       <td>${entity.username!}</td>
                       <td>${entity.nickname!}</td>
                       <td>${entity.salary!}</td>
                       <td>
                           <a class="btn btn-info btn-xs inputBtn" data-json='${entity.json!}'>
                               <span class="glyphicon glyphicon-pencil"></span> 编辑
                           </a>
                           <a role="button" data-url="/employee/delete?id=${entity.id}"
                              class="btn btn-danger btn-xs deleteBtn">
                               <span class="glyphicon glyphicon-trash"></span> 删除
                           </a>
                       </td>
                   </tr>
                </#list>-->
            </table>

            <div style="text-align: center;">
                <ul id="pagination" class="pagination"></ul>
            </div>


        </div>
    </div>
</div>

<div class="modal fade" id="editModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" id="closeBtn" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">员工编辑</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="/employees/saveOrUpdate" method="post" id="editForm">
                    <input type="hidden" name="id">

                    <div class="form-group">
                        <label class="col-sm-4 control-label">员工用户名：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="username" name="username" placeholder="请输入员工用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">员工昵称：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="nickname" name="nickname" placeholder="请输入员工昵称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">员工工资：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="salary" name="salary" placeholder="请输入员工工资">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="saveBtn" type="button" class="btn btn-primary btn_save">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>